<!DOCTYPE html><html lang="zh-CN"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五神鸟神话 - VR体验门户</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.iconify.design/3/3.1.1/iconify.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&display=swap');
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', 'Source Han Sans CN', sans-serif;
            color: white;
            background: #0a1a35;
            overflow-x: hidden;
        }
        
        .title-font {
            font-family: 'Noto Serif SC', serif;
            font-weight: 700;
        }
        
        /* 导航栏样式 */
        .nav-bar {
            position: fixed;
            top: 0;
            width: 100%;
            height: 80px;
            background: rgba(0, 0, 0, 0.6);
            backdrop-filter: blur(10px);
            border-bottom: 1px solid #d4af37;
            z-index: 100;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
        }
        
        .logo {
            display: flex;
            align-items: center;
            gap: 12px;
        }
        
        .logo-text {
            font-size: 24px;
            color: #d4af37;
        }
        
        .nav-menu {
            display: flex;
            gap: 30px;
        }
        
        .nav-item {
            font-size: 16px;
            position: relative;
            cursor: pointer;
        }
        
        .nav-active {
            color: #d4af37;
        }
        
        .nav-active::after {
            content: "";
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 100%;
            height: 2px;
            background: #d4af37;
        }
        
        /* 主视觉区 */
        .hero-section {
            height: 100vh;
            position: relative;
            overflow: hidden;
        }
        
        .video-bg {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -1;
        }
        
        .video-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 20%;
            background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);
        }
        
        .hero-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
            z-index: 10;
            animation: fadeIn 1.5s ease-out;
        }
        
        .main-title {
            font-size: 120px;
            color: #d4af37;
            margin-bottom: 20px;
            text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
        }
        
        .sub-title {
            font-size: 32px;
            margin-bottom: 30px;
            letter-spacing: 2px;
        }
        
        .cta-text {
            font-size: 24px;
            font-weight: bold;
        }
        
        /* 亮点展示区 */
        .highlight-section {
            height: 100vh;
            display: flex;
            overflow-x: auto;
            scroll-snap-type: x mandatory;
            scrollbar-width: none;
        }
        
        .highlight-section::-webkit-scrollbar {
            display: none;
        }
        
        .scene {
            min-width: 100vw;
            height: 100vh;
            scroll-snap-align: start;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .scene-1 {
            background: linear-gradient(135deg, #1a0a35, #2d0b52);
        }
        
        .scene-2 {
            position: relative;
            overflow: hidden;
            background: linear-gradient(135deg, #0a3528 0%, #0f5540 100%);
        }
        .scene-2::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 60% 40%, rgba(80,200,255,0.22) 0%, rgba(0,0,0,0.22) 80%, transparent 100%),
                linear-gradient(120deg, rgba(200,255,255,0.12) 0%, rgba(100,200,255,0.18) 100%),
                url('https://modao.cc/ai/uploads/ai_pics/20/207961/aigp_1756903292.jpeg') center/cover no-repeat;
            z-index: 0;
            pointer-events: none;
            filter: blur(2px) brightness(0.95);
        }
        .scene-2 .scene-text {
            position: relative;
            z-index: 2;
            background: rgba(10,26,53,0.65);
            border-radius: 18px;
            box-shadow: 0 0 32px #6fdcff66;
            color: #fff;
            border: 1px solid #6fdcff44;
        }
        .scene-3 {
            background: linear-gradient(135deg, #0a1a35 0%, #0a2a5a 100%);
            position: relative;
        }
        .scene-3::before {
            content: "";
            position: absolute;
            inset: 0;
            background:
                radial-gradient(circle at 50% 60%, rgba(212,175,55,0.18) 0%, rgba(10,26,53,0.22) 80%, transparent 100%),
                url('https://modao.cc/ai/uploads/ai_pics/20/203781/aigp_1756830499.jpeg') center/cover no-repeat;
            z-index: 0;
            pointer-events: none;
            filter: blur(2px) brightness(0.95);
        }
        .scene-3 .scene-text {
            position: relative;
            z-index: 2;
            background: rgba(10,26,53,0.65);
            border-radius: 18px;
            box-shadow: 0 0 32px #d4af3766;
            color: #fff;
            border: 1px solid #d4af3744;
        }
        
        .scene-text {
            font-size: 28px;
            max-width: 450px;
            text-align: center;
            padding: 20px;
            animation: slideIn 1s ease-out;
        }
        
        .scene-1 .scene-text {
            margin-right: 10%;
        }
        
        .scene-2 .scene-text {
            margin-left: 10%;
        }
        
        /* 技术特性 */
        .tech-features {
            position: fixed;
            z-index: 50;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            display: none;
            gap: 30px;
        }
        
        .tech-card {
            width: 180px;
            height: 80px;
            background: rgba(0, 0, 0, 0.5);
            border: 1px solid #d4af37;
            border-radius: 10px;
            padding: 15px;
            display: flex;
            align-items: center;
            animation: float 3s ease-in-out infinite;
        }
        
        .tech-left {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }
        
        .tech-icon {
            font-size: 24px;
            margin-right: 15px;
        }
        
        /* 设备支持区 */
        .device-section {
            height: 100vh;
            background: #0a1a35;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background-image: 
                radial-gradient(white 1px, transparent 1px),
                radial-gradient(#d4af37 1px, transparent 1px);
            background-size: 30px 30px;
            background-position: 0 0, 15px 15px;
        }
        
        .helmet-container {
            position: relative;
            width: 400px;
            height: 300px;
            margin-bottom: 100px;
            display: flex;
            justify-content: center;
        }
        
        .hologram {
            position: absolute;
            width: 100%;
            height: 100%;
            background: radial-gradient(circle, rgba(212,175,55,0.3) 0%, transparent 70%);
            animation: pulse 4s infinite alternate;
        }
        
        .device-logos {
            display: flex;
            gap: 30px;
            margin-bottom: 50px;
        }
        
        .device-logo {
            width: 80px;
            height: 40px;
            filter: grayscale(100%);
            border: 1px solid #d4af37;
        }
        
        .final-cta {
            font-size: 32px;
        }
        
        /* 页脚 */
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            background: #000000;
            border-top: 1px solid #d4af37;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 2rem;
            z-index: 100;
        }
        
        .footer-nav {
            display: flex;
            gap: 20px;
        }
        
        .social-icons {
            display: flex;
            gap: 15px;
        }
        
        /* 动画 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translate(-50%, -40%); }
            to { opacity: 1; transform: translate(-50%, -50%); }
        }
        
        @keyframes slideIn {
            from { opacity: 0; transform: translateY(30px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
            100% { transform: translateY(0); }
        }
        
        @keyframes pulse {
            0% { opacity: 0.3; transform: scale(0.95); }
            100% { opacity: 0.7; transform: scale(1.05); }
        }
        
        /* 粒子效果 */
        .particles {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: -1;
        }
        
        .particle {
            position: absolute;
            background: white;
            border-radius: 50%;
            pointer-events: none;
        }
        
        /* 第二面背景特效，仅限scene-2 */
        .scene-2 {
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #0a3528 0%, #0f5540 100%);
        }
        .news-bg {
          position: absolute; inset: 0; z-index: 1; pointer-events: none;
        }
        .news-glassflow {
          position: absolute; inset: 0;
          background: linear-gradient(120deg, rgba(200,255,255,0.08) 0%, rgba(100,200,255,0.12) 100%);
          backdrop-filter: blur(18px);
          opacity: 0.7;
          animation: glassflowMove 18s linear infinite alternate;
        }
        @keyframes glassflowMove {
          0% { filter: blur(12px); }
          100% { filter: blur(32px); }
        }
        .news-particles {
          position: absolute; inset: 0; z-index: 2;
        }
        .news-center {
          position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 420px; height: 420px; border-radius: 50%;
          background: radial-gradient(circle at 50% 50%, rgba(80,200,255,0.18) 0%, rgba(0,0,0,0.08) 80%, transparent 100%);
          box-shadow: 0 0 80px #6fdcff, 0 0 160px #0a3528;
          z-index: 10; overflow: visible;
        }
        .news-rift {
          position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 340px; height: 340px; border-radius: 50%;
          background: repeating-conic-gradient(from 0deg, #6fdcff 0deg 12deg, transparent 12deg 24deg);
          mask-image: radial-gradient(circle at 50% 50%, transparent 60%, #fff 100%);
          opacity: 0.7;
          filter: blur(2px) brightness(1.2);
          box-shadow: 0 0 60px #6fdcff;
          animation: riftSpin 18s linear infinite;
        }
        @keyframes riftSpin {
          0% { transform: translate(-50%,-50%) rotate(0deg); }
          100% { transform: translate(-50%,-50%) rotate(360deg); }
        }
        .news-glow {
          position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 320px; height: 320px; border-radius: 50%;
          background: radial-gradient(circle, #6fdcff 0%, transparent 80%);
          opacity: 0.18;
          animation: glowPulse 3.5s infinite alternate;
        }
        @keyframes glowPulse {
          0% { opacity: 0.12; }
          100% { opacity: 0.28; }
        }
        .news-fragments {
          position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
          width: 480px; height: 480px; pointer-events: none; z-index: 12;
        }
        </style>
        <script>
        // scene-2 背景动态碎片和粒子
        function createNewsFragments() {
          const frag = document.querySelector('.news-fragments');
          for(let i=0;i<18;i++){
            const f=document.createElement('div');
            f.style.position='absolute';
            f.style.width=Math.random()*32+18+'px';
            f.style.height=Math.random()*18+12+'px';
            f.style.borderRadius=Math.random()>0.5?'12px':'50%';
            f.style.background='linear-gradient(135deg,#6fdcff 60%,#fff 100%)';
            f.style.opacity=0.7;
            const angle=i*20+Math.random()*12;
            const radius=200+Math.random()*40;
            f.style.left=240+Math.cos(angle*Math.PI/180)*radius+'px';
            f.style.top=240+Math.sin(angle*Math.PI/180)*radius+'px';
            f.style.boxShadow='0 0 18px #6fdcff,0 0 32px #fff';
            f.animate([
              {transform:`scale(1) rotate(0deg)`},
              {transform:`scale(1.15) rotate(360deg)`}
            ],{
              duration:3600+Math.random()*1200,
              iterations:Infinity,
              easing:'linear',
              delay:i*80
            });
            frag.appendChild(f);
          }
        }
        function createNewsParticles() {
          const pfield = document.querySelector('.news-particles');
          for(let i=0;i<28;i++){
            const p=document.createElement('div');
            p.style.position='absolute';
            p.style.width=p.style.height=Math.random()*8+4+'px';
            p.style.borderRadius='50%';
            p.style.background='radial-gradient(circle,#fff 60%,#6fdcff 100%)';
            p.style.opacity=0.5+Math.random()*0.3;
            p.style.left=Math.random()*100+'vw';
            p.style.top=Math.random()*100+'vh';
            p.style.filter='blur(1.5px)';
            p.style.boxShadow='0 0 12px #6fdcff';
            p.animate([
              {transform:`translateY(0) scale(1)`},
              {transform:`translateY(60px) scale(0.7)`}
            ],{
              duration:3200+Math.random()*1800,
              iterations:Infinity,
              easing:'ease-in',
              delay:i*60
            });
            pfield.appendChild(p);
          }
        }
        document.addEventListener('DOMContentLoaded',function(){
          createNewsFragments();
          createNewsParticles();
        });
        </script>
    </head>
<body>
    <!-- 粒子背景 -->
    <div class="particles" id="particles"></div>

    <!-- 顶部导航栏 -->
    <nav class="nav-bar">
        <div class="logo">
            <span class="iconify" data-icon="mdi:bird" style="color: #d4af37; font-size: 40px;"></span>
            <div class="logo-text title-font">五神鸟</div>
        </div>
        
        <div class="nav-menu">
            <a href="首頁.html" class="nav-item">首页</a>
            <a href="神鳥傳説界面.html" class="nav-item">神鸟传说</a>
            <a href="科技神韻界面.html" class="nav-item">
                <span class="nav-active">科技互动</span>
            </a>
            <a href="文化传承.html" class="nav-item">文化传承</a>
            <a href="关于我们.html" class="nav-item">关于我们</a>
        </div>
        
        <div class="nav-actions">
            <!-- <span class="iconify" data-icon="mdi:magnify" style="color: white; font-size: 20px; margin-right: 30px;"></span> -->
            <!-- <span class="nav-item">EN/中文</span> -->
        </div>
    </nav>

    <!-- 主视觉区 -->
    <section class="hero-section">
        <div class="video-overlay"></div>
        <div class="hero-content">
            <h1 class="main-title title-font">身临神境</h1>
            <p class="sub-title">穿越时空，亲历神话</p>
            <p class="cta-text">准备好，见证传说。</p>
        </div>
    </section>

    <!-- VR体验亮点展示区 -->
    <section class="highlight-section" id="highlightSection">
        <div class="scene scene-1"></div>
        <div class="scene scene-2"></div>
        <div class="scene scene-3"></div>
    </section>

    <!-- 技术特性悬浮展示区 -->
    <div class="tech-features" id="techFeatures">
        <div class="tech-left">
            </div>
            <div class="tech-card" onclick="window.location.href='神念交互.html'">
                <span class="iconify tech-icon" data-icon="mdi:eye-outline"></span>
                <span>手指交互</span>
            </div>
            <div class="tech-card">
                <span class="iconify tech-icon" data-icon="mdi:surround-sound"></span>
                <span>360°空间音频</span>
            </div>
        <!-- </div> -->
        <!-- <div class="tech-card">
            <span class="iconify tech-icon" data-icon="mdi:high-definition"></span>
            <span>8K超高清渲染</span>
        </div> -->
    </div>

    <!-- 设备支持区 -->
    <section class="device-section" id="deviceSection">
        <div class="helmet-container">
            <div class="hologram"></div>
            <img id="99" src="https://modao.cc/ai/uploads/ai_pics/20/207961/aigp_1756903292.jpeg" alt="VR helmet with holographic bird projection" width="400" height="300">
        </div>
        <div id="vr-particles"></div>
        <div class="device-logos">
            <img id="98" src="https://modao.cc/ai/uploads/ai_pics/20/207962/aigp_1756903294.jpeg" alt="Meta Quest Logo" class="device-logo">
            <img id="97" src="https://modao.cc/ai/uploads/ai_pics/20/207963/aigp_1756903296.jpeg" alt="PICO VR Logo" class="device-logo">
            <img id="96" src="https://modao.cc/ai/uploads/ai_pics/20/207964/aigp_1756903299.jpeg" alt="Valve Index Logo" class="device-logo">
        </div>
        <p class="final-cta">神话，等你来体验。</p>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
        <div class="copyright">©2023五神鸟文化科技</div>
        
        <div class="footer-nav">
            <div>关于我们</div>
            <div>联系我们</div>
            <div>隐私政策</div>
            <div>使用条款</div>
        </div>
        
        <div class="social-icons">
            <span class="iconify" data-icon="mdi:wechat" style="color: white; font-size: 20px;"></span>
            <span class="iconify" data-icon="mdi:weibo" style="color: white; font-size: 20px;"></span>
            <span class="iconify" data-icon="mdi:tiktok" style="color: white; font-size: 20px;"></span>
        </div>
    </footer>

    <audio id="bg-audio" src="#" loop preload="auto" style="display:none"></audio>

    <script>
        // 粒子效果
        function createParticles() {
            const container = document.getElementById('particles');
            const particleCount = 150;
            
            for (let i = 0; i < particleCount; i++) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                
                const size = Math.random() * 3 + 1;
                particle.style.width = `${size}px`;
                particle.style.height = `${size}px`;
                particle.style.left = `${Math.random() * 100}vw`;
                particle.style.top = `${Math.random() * 100}vh`;
                particle.style.opacity = Math.random() * 0.6 + 0.1;
                
                container.appendChild(particle);
            }
            
            // 粒子移动效果
            document.addEventListener('mousemove', (e) => {
                const particles = document.querySelectorAll('.particle');
                const mouseX = e.clientX;
                const mouseY = e.clientY;
                
                particles.forEach(particle => {
                    const x = parseFloat(particle.style.left);
                    const y = parseFloat(particle.style.top);
                    
                    const dx = mouseX - x;
                    const dy = mouseY - y;
                    
                    const distance = Math.sqrt(dx * dx + dy * dy);
                    const force = distance * 0.0001;
                    
                    particle.style.transform = `translate(${dx * force}px, ${dy * force}px)`;
                });
            });
        }
        
        // 技术特性卡片显示控制
        function handleTechFeatures() {
            const techSection = document.querySelector('.highlight-section');
            const techFeatures = document.getElementById('techFeatures');
            
            window.addEventListener('scroll', () => {
                const rect = techSection.getBoundingClientRect();
                
                // 当滚动到第二个场景时显示卡片
                if (rect.top <= window.innerHeight * 0.3 && rect.bottom >= window.innerHeight * 0.7) {
                    techFeatures.style.display = 'flex';
                } else {
                    techFeatures.style.display = 'none';
                }
            });
        }
        
        // 替换亮点展示区背景为中心发光+光束+二进制特效
        function createSciFiBg() {
            const highlight = document.getElementById('highlightSection');
            highlight.style.position = 'relative';
            highlight.innerHTML = '';
            // 中心发光层
            const glow = document.createElement('div');
            glow.style.position = 'absolute';
            glow.style.left = '50%';
            glow.style.top = '50%';
            glow.style.transform = 'translate(-50%,-50%)';
            glow.style.width = '600px';
            glow.style.height = '600px';
            glow.style.borderRadius = '50%';
            glow.style.background = 'radial-gradient(circle, #d4af37 0%, #6fdcff 40%, #0a1a35 100%)';
            glow.style.boxShadow = '0 0 180px 80px #d4af37, 0 0 320px 120px #6fdcff';
            glow.style.zIndex = '2';
            highlight.appendChild(glow);
            // 光束层
            const beam = document.createElement('div');
            beam.style.position = 'absolute';
            beam.style.left = '50%';
            beam.style.top = '50%';
            beam.style.transform = 'translate(-50%,-50%)';
            beam.style.width = '8px';
            beam.style.height = '600px';
            beam.style.background = 'linear-gradient(180deg, #fff 0%, #d4af37 60%, transparent 100%)';
            beam.style.opacity = '0.7';
            beam.style.borderRadius = '4px';
            beam.style.zIndex = '3';
            beam.id = 'beam';
            highlight.appendChild(beam);
            // 二进制数码特效
            for(let i=0;i<60;i++){
                const digit = document.createElement('div');
                digit.textContent = Math.random()>0.5?'0':'1';
                digit.style.position = 'absolute';
                digit.style.color = '#6fdcff';
                digit.style.fontSize = Math.random()*18+16+'px';
                digit.style.opacity = Math.random()*0.5+0.3;
                digit.style.left = Math.random()>0.5?'calc(5% + '+Math.random()*40+'px)':'calc(95% - '+Math.random()*40+'px)';
                digit.style.top = Math.random()*100+'vh';
                digit.style.fontFamily = 'monospace';
                digit.style.zIndex = '4';
                highlight.appendChild(digit);
            }
            for(let i=0;i<40;i++){
                const digit = document.createElement('div');
                digit.textContent = Math.random()>0.5?'0':'1';
                digit.style.position = 'absolute';
                digit.style.color = '#d4af37';
                digit.style.fontSize = Math.random()*18+16+'px';
                digit.style.opacity = Math.random()*0.5+0.3;
                digit.style.left = Math.random()*100+'vw';
                digit.style.top = Math.random()>0.5?'calc(5% + '+Math.random()*40+'px)':'calc(95% - '+Math.random()*40+'px)';
                digit.style.fontFamily = 'monospace';
                digit.style.zIndex = '4';
                highlight.appendChild(digit);
            }
            // 鼠标移动光束跟随
            highlight.onmousemove = function(e){
                const rect = highlight.getBoundingClientRect();
                const x = e.clientX - rect.left;
                const y = e.clientY - rect.top;
                const beam = document.getElementById('beam');
                if(beam){
                    beam.style.left = x+'px';
                    beam.style.top = y+'px';
                }
            };
        }
        // VR设备区黑洞塌陷与动态扩散特效
        function createVRParticles() {
            const deviceSection = document.getElementById('deviceSection');
            const particleField = document.getElementById('vr-particles');
            particleField.style.position = 'absolute';
            particleField.style.left = '0';
            particleField.style.top = '0';
            particleField.style.width = '100%';
            particleField.style.height = '100%';
            particleField.style.pointerEvents = 'none';
            let points = [];
            // 初始化点阵
            for(let i=0;i<80;i++){
                const dot = document.createElement('div');
                dot.className = 'vr-dot';
                dot.style.position = 'absolute';
                dot.style.width = dot.style.height = Math.random()*6+4+'px';
                dot.style.borderRadius = '50%';
                dot.style.background = 'radial-gradient(circle,#d4af37 60%,#fff 100%)';
                dot.style.opacity = Math.random()*0.5+0.3;
                const angle = Math.random()*2*Math.PI;
                const radius = 220+Math.random()*120;
                const cx = deviceSection.offsetWidth/2;
                const cy = deviceSection.offsetHeight/2;
                dot.style.left = (cx + Math.cos(angle)*radius)+'px';
                dot.style.top = (cy + Math.sin(angle)*radius)+'px';
                particleField.appendChild(dot);
                points.push({el:dot,angle,radius,cx,cy});
            }
            // 鼠标收缩与动态扩散
            deviceSection.addEventListener('mousemove',function(e){
                const rect = deviceSection.getBoundingClientRect();
                const mx = e.clientX - rect.left;
                const my = e.clientY - rect.top;
                // 黑洞塌陷收缩
                points.forEach(pt=>{
                    const dx = mx-pt.cx;
                    const dy = my-pt.cy;
                    const dist = Math.sqrt(dx*dx+dy*dy);
                    const shrink = 0.5 + 0.5*Math.exp(-dist/180);
                    const newR = pt.radius*shrink;
                    pt.el.style.left = (mx + Math.cos(pt.angle)*newR)+'px';
                    pt.el.style.top = (my + Math.sin(pt.angle)*newR)+'px';
                });
                // 动态扩散粒子
                for(let i=0;i<18;i++){
                    const sp = document.createElement('div');
                    sp.className = 'vr-spread';
                    sp.style.position = 'absolute';
                    sp.style.width = sp.style.height = Math.random()*5+3+'px';
                    sp.style.borderRadius = '50%';
                    sp.style.background = 'radial-gradient(circle,#6fdcff 60%,#fff 100%)';
                    sp.style.opacity = '0.8';
                    sp.style.left = mx+'px';
                    sp.style.top = my+'px';
                    particleField.appendChild(sp);
                    const angle = Math.random()*2*Math.PI;
                    const speed = 2+Math.random()*3;
                    let t = 0;
                    function animateSpread(){
                        t+=1;
                        sp.style.left = (mx + Math.cos(angle)*speed*t)+'px';
                        sp.style.top = (my + Math.sin(angle)*speed*t)+'px';
                        sp.style.opacity = Math.max(0,0.8-t/30);
                        if(t<30){
                            requestAnimationFrame(animateSpread);
                        }else{
                            sp.remove();
                        }
                    }
                    animateSpread();
                }
            });
            // 鼠标离开恢复
            deviceSection.addEventListener('mouseleave',function(){
                points.forEach(pt=>{
                    pt.el.style.left = (pt.cx + Math.cos(pt.angle)*pt.radius)+'px';
                    pt.el.style.top = (pt.cy + Math.sin(pt.angle)*pt.radius)+'px';
                });
            });
        }
        document.addEventListener('DOMContentLoaded', () => {
            createParticles();
            handleTechFeatures();
            createSciFiBg();
            createVRParticles();
            // 音频播放/暂停功能
            const audio = document.getElementById('bg-audio');
            const audioCard = Array.from(document.querySelectorAll('.tech-card')).find(card => card.textContent.includes('360°空间音频'));
            let isPlaying = false;
            if (audioCard) {
                audioCard.addEventListener('click', function(e) {
                    e.stopPropagation();
                    if (!isPlaying) {
                        audio.play();
                        isPlaying = true;
                        audioCard.style.boxShadow = '0 0 30px #d4af37';
                    } else {
                        audio.pause();
                        isPlaying = false;
                        audioCard.style.boxShadow = '';
                    }
                });
            }
        });
    </script>

</body></html>